<template>
    <div>
        <div v-if="isShow">
            <div class="djClass">大疆 Fly</div>
            <div class="djList">
                <div class="itemBox" v-for="(item, index) in 8" :key="index" @click="djDetailHandler">
                    <!-- <video src="" controls style="border-radius:10px;width: 220px;height:100px;"></video> -->
                    <img src="https://img0.baidu.com/it/u=170390433,818169901&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=278"
                        style="object-fit: cover;border-radius:10px;" width="215" height="100%" alt="">
                    <div style="margin-left:10px;display:flex;flex-direction:column;justify-content:center;">
                        <div style="width:100%;word-wrap:break-word; word-break:break-all;"><span
                                style="font-weight:block;">名称：</span>山顶全景拍摄.MP4</div>
                        <div style="width:100%;word-wrap:break-word; word-break:break-all;"><span
                                style="font-weight:block;">时间：</span>2023-12-18</div>
                        <div style="width:100%;word-wrap:break-word; word-break:break-all;"><span
                                style="font-weight:block;">路径：</span>D://basePhone/srcMing/path/dataimg.mp4</div>
                    </div>
                </div>
            </div>
        </div>
        <otherMessage v-else @backEvent="backEventHandler"></otherMessage>
    </div>
</template>

<script>
import otherMessage from './otherMessage'
export default {
    name: 'DJ',
    data() {
        return {
            isShow: true
        }
    },
    components: {
        otherMessage,
    },
    methods: {
        djDetailHandler() {
            this.isShow = false
        },
        backEventHandler(data) {
            this.isShow = data
        }
    }
}
</script>

<style scoped>
.djClass {
    height: 50px;
    border-bottom: 1px solid rgb(207, 206, 206);
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
}

.djList {
    height: 87vh;
    overflow-y: auto;
}

@media screen and (min-width: 2360px) {
    .djList {
        max-height: 83vh;

    }
}

@media screen and (min-width: 2561px) {
    .djList {
        max-height: 68vh;

    }
}

.itemBox {
    height: 130px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
}
</style>